<template>
    <div class="NeighbourhoodsDetail">

        <div class="houseList">
            <div>
                <CommonImage class="imgCustom" :src="baseList.pictureAddress" />
            </div>
            <div class="item">
                <div style="display: flex;justify-content: space-between;">
                    <div>
                        <div class="flex">
                            <span class="title">{{ baseList.name }}</span>
                        </div>
                        <div class="flex2">
                            <span class="tagId">No.{{ baseList.no }}</span>
                            <span class="tag1" v-if="baseList.isTop == '1'">{{ $t('text.Common.l17') }}</span>
                            <span class="tag2" v-if="baseList.isCollect">{{ $t('text.Common.l18') }}</span>

                            <span class="tag4" v-if="baseList.saleStatus != null && baseList.saleStatus == $t('text.DialogLayout.l78')">
                                {{ $t('text.DialogLayout.l78') }}
                            </span>
                            <span class="tag6" v-if="baseList.saleStatus != null && baseList.saleStatus == $t('text.DialogLayout.l79')">
                                {{ $t('text.DialogLayout.l79') }}
                            </span>

                            <span class="tag5" v-if="baseList.saleStatus != null && baseList.saleStatus == $t('text.DialogLayout.l80')">
                                {{ $t('text.DialogLayout.l80') }}
                            </span>

                            <span v-for="item in  supportingFacilities" v-bind:key="item" class="tag7">
                                {{ item }}
                            </span>
                        </div>
                    </div>

                    <!--右侧菜单-->
                    <div class="flex" style="position: relative;margin-right: 20px;">
                        <DialogLayout26 :newHouseName="baseList.name" isNewHouse>
                            <div class="dd6">
                                <div class="dd1"><img src="../../assets/images/h34.svg" class="dd2"></div>
                                <div class="dd3">{{ $t('text.House.l208') }}</div>
                            </div>
                        </DialogLayout26>
                        <div>
                            <img src="../../assets/images/share.svg" class="dd4">
                            <div class="dd3">{{ $t('text.House.l209') }}</div>
                        </div>
                        <!--更多-->
                        <MoreMenuSelect>
                            <div>
                                <img src="../../assets/images/more.svg" class="dd4">
                                <div class="dd3">{{ $t('text.House.l112') }}</div>
                            </div>
                            <template v-slot:item>
                                <div class="more">
                                    <div class=" b1 df1">
                                        <div class="m3" v-for="( item, index ) in moreMeans" v-bind:key="item">
                                            <div :style="{ 'background': item.color }" class="m2">
                                                <img class="m1" :src="item.img">
                                            </div>
                                            <DialogLayout15 v-if="index == 0" isNewHouse>{{ item.name }}</DialogLayout15>
                                            <div v-if="index == 1" @click="setTop(baseList.isTop == '1')">
                                                {{ baseList.isTop == '1' ? item.name[1] : item.name[0] }}
                                            </div>
                                            <div v-if="index == 2" @click="setCollect(baseList.isCollect)">
                                                {{ baseList.isCollect ? item.name[1] : item.name[0] }}
                                            </div>
                                            <DialogLayout9 v-if="index == 3" isNewHouse>{{ item.name }}</DialogLayout9>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </MoreMenuSelect>
                    </div>
                </div>


                <div class="flex">
                    <div style="display: flex;">
                        <img class="ad1" src="../../assets/images/address.svg">
                        <div class="text8" style="padding: 0;">
                            {{ baseList.address == null ? $t('text.Neighbourhoods.l61') : baseList.address }}
                        </div>
                    </div>
                </div>

                <div style="font-size: 14px;text-align:left;gap:5px;display:flex;align-items:center;padding-top:4px">
                    <span>{{ $t('text.House.l210') }}</span>
                    <span style="color: #ec808d;font-weight: 600;font-size: 15px;">
                        {{ baseList.unitPrice == null ? '-' : String(baseList.unitPrice).replace(/\B(?=(\d{3})+(?!\d))/g,
                            ',') +
                            "AED/m²" }}</span>
                </div>


            </div>
        </div>

        <div>
            <HouseDeatilNavigation @returnData="setPage" :navList="topNavList"></HouseDeatilNavigation>
        </div>
        <BasicDetail v-if="page == '1' && isLoad" :baseList="baseList"></BasicDetail>
        <PictureVideoDetail v-if="page == '2'"></PictureVideoDetail>
        <UnitManage v-if="page == '3'"></UnitManage>
        <ProxyRules v-if="page == '4'"></ProxyRules>
        <FilingViewing v-if="page == '5'"></FilingViewing>
        <VisitorRecord v-if="page == '6'"></VisitorRecord>
        <OperateLog v-if="page == '7'"></OperateLog>
    </div>
</template>
    
<script>

import { newsFindDetailById, newsSetTop } from '../../http/api'
import { ElMessage } from 'element-plus'

import BasicDetail from './BasicDetail.vue'
import UnitManage from './UnitManage.vue'
import PictureVideoDetail from './PictureVideoDetail.vue'
import ProxyRules from './ProxyRules.vue'
import FilingViewing from './FilingViewing.vue'
import OperateLog from './OperateLog.vue'
import VisitorRecord from './VisitorRecord.vue'
import MoreMenuSelect from '@/components/select/MoreMenuSelect.vue'

export default {
    name: 'NeighbourhoodsDetail',
    components: {
        BasicDetail: BasicDetail,
        UnitManage: UnitManage,
        PictureVideoDetail: PictureVideoDetail,
        ProxyRules: ProxyRules,
        FilingViewing: FilingViewing,
        VisitorRecord: VisitorRecord,
        OperateLog: OperateLog,
        MoreMenuSelect
    },
    props: {
    },
    data() {
        return {
            topNavList: [this.$t('text.Neighbourhoods.l1'), this.$t('text.Neighbourhoods.l2'), this.$t('text.Neighbourhoods.l3'),
            this.$t('text.House.l242'), this.$t('text.House.l243'), this.$t('text.House.l6'), this.$t('text.House.l244')],
            page: 1,
            baseList: {},
            isLoad: false,
            supportingFacilities: [],
            moreMeans: [
                { name: this.$t('text.House.l122'), img: require('../../assets/images/f3.svg'), color: "#8080ff" },
                { name: [this.$t('text.House.l123'), this.$t('text.House.l285')], img: require('../../assets/images/f4.svg'), color: "#f9cd90" },
                { name: [this.$t('text.House.l124'), this.$t('text.House.l286')], img: require('../../assets/images/f5.svg'), color: "#b8741a" },
                { name: this.$t('text.House.l129'), img: require('../../assets/images/f10.svg'), color: "#ec808d" },
            ],
        }
    },
    mounted() {
        if (this.$route.query.id != undefined) {

            newsFindDetailById({ id: this.$route.query.id }).then(res => {
                if (res !== undefined && res != null) {
                    this.baseList = res
                    if (res.sellPoint != null)
                        this.supportingFacilities = res.sellPoint.split(",")
                    this.isLoad = true
                }
                console.log(res)
            }).catch()
        }

    },
    methods: {
        setPage(index) {
            this.page = index
        },

        setTop(booeal) {
            newsSetTop({ houseId: this.$route.query.id, isTop: !booeal ? '1' : '0' }).then(res => {
                if (res !== undefined) {
                    this.baseList.isTop = !booeal ? '1' : '0'
                    ElMessage.success({
                        showClose: true,
                        message: this.$t('text.Common.l3'),
                        type: 'success',
                    })
                }
            }).catch()
        },
        setCollect() {
            // if (booeal) {
            //     if (!this.isCustom) {
            //         delCollectHouse({ houseId: this.$route.query.id }).then(res => {
            //             if (res !== undefined) {
            //                 this.dataListCopy.isCollect = false
            //                 ElMessage.success({
            //                     showClose: true,
            //                     message: '设置成功',
            //                     type: 'success',
            //                 })
            //             }
            //         }).catch()
            //     } else {
            //         delCollectCustomer({ customerId: this.$route.query.id }).then(res => {
            //             if (res !== undefined) {
            //                 this.dataListCopy.isCollect = false
            //                 ElMessage.success({
            //                     showClose: true,
            //                     message: '设置成功',
            //                     type: 'success',
            //                 })
            //             }
            //         }).catch()
            //     }
            // } else {
            //     if (!this.isCustom) {
            //         collectHouse({ houseId: this.$route.query.id }).then(res => {
            //             if (res !== undefined) {
            //                 this.dataListCopy.isCollect = true
            //                 ElMessage.success({
            //                     showClose: true,
            //                     message: '设置成功',
            //                     type: 'success',
            //                 })
            //             }
            //         }).catch()
            //     } else {
            //         collectCustomer({ customerId: this.$route.query.id }).then(res => {
            //             if (res !== undefined) {
            //                 this.dataListCopy.isCollect = true
            //                 ElMessage.success({
            //                     showClose: true,
            //                     message: '设置成功',
            //                     type: 'success',
            //                 })
            //             }
            //         }).catch()
            //     }
            // }
        },
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.tagId {
    color: #6698ff;
    border: 1px solid #6698ff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
}

.NeighbourhoodsDetail {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.m1 {
    width: 17px;
    height: 17px;
    padding-top: 0;
}

.m2 {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-right: 10px;
}

.m3 {
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    word-spacing: normal;
}

.more {
    background: white;
    top: 90px;
    right: 55px;
    padding: 10px;
    padding-bottom: 0;
    font-size: 13px;
    z-index: 5;
    border: 1px solid #eee;
}

.houseList {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 10px;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80px;
    margin-left: 15px;
    padding-top: 20px;
}

.imgCustom {
    width: 170px;
    height: 110px;
    padding: 0;
    margin-top: 45px;
}

.flex {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
    gap: 25px;
}

.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    word-break: keep-all;
    padding-top: 5px;
    gap: 5px;
}

.titleTag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 13px;
    margin-right: 5px;
    margin-left: 20px;
}

.title {
    color: black;
    font-size: 15px;
}

.tag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
}

.text5 {
    font-size: 12px;
    color: rgb(236, 128, 141);
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
}

.text6 {
    font-size: 12px;
    color: black;
    word-break: keep-all;
    white-space: nowrap;
    text-align: initial;
    font-weight: bold;
    padding-right: 5px;
}

.text7 {
    font-size: 12px;
    color: #6698ff;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
    padding-right: 15px;
}

.text8 {
    font-size: 12px;
    padding-top: 5px;
    color: #5c5c5c;
    word-break: keep-all;
    white-space: nowrap;
    text-align: center;
    padding-right: 15px;
}

.ad1 {
    width: 15px;
    height: 15px;
}

.dd1 {
    background: #6698ff;
    border-radius: 100%;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dd2 {
    width: 17px;
    height: 17px;
}

.dd3 {
    color: #6698ff;
    font-size: 13px;
    padding-top: 5px;
}

.dd4 {
    width: 33px;
    height: 33px;
}

.dd5 {
    width: 30px;
    height: 30px;
}

.dd6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titleTag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 13px;
    margin-right: 5px;
    margin-left: 20px;
}

.title {
    color: black;
    font-size: 20px;
}

.tag {
    border: 1px solid;
    padding: 3px 6px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
}

.tag1 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(236, 128, 141);
    padding: 3px 6px;
    color: white;
    margin-right: 5px;
}
.tag2 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #666de1;
    padding: 2px 6px;
    color: white;
    border: 1px solid #666de1;
    margin-right: 5px;
}
.tag3 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #979797;
    padding: 2px 6px;
    color: white;
    border: 1px solid #979797;
    margin-right: 5px;
}
.tag4 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f9cd90;
    padding: 2px 6px;
    color: white;
    border: 1px solid #f9cd90;
    margin-right: 5px;
}
.tag5 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #f59b22;
    padding: 2px 6px;
    color: white;
    border: 1px solid #f59b22;
    margin-right: 5px;
}
.tag6 {
    font-size: 12px;
    border-radius: 3px;
    background-color: #5ec8b2;
    padding: 2px 6px;
    color: white;
    border: 1px solid #5ec8b2;
    margin-right: 5px;
}
.tag7 {
    font-size: 12px;
    border-radius: 3px;
    background-color: rgb(242, 242, 242);
    padding: 2px 6px;
    color: black;
    border: 1px solid rgb(215, 215, 215);
    margin-right: 5px;
}


</style>